<template>
	<div class="login_content">
		<div class="home_box">	

		<div class="header_wrap">
			<div class="header">
				<a class="icon_back1" :class="[rotate?'fa fa-arrow-down go':'fa fa-arrow-down aa']" @click="flushclick"></a>
				<p class="header_title">天天时时彩</p>
				<div class="icon_you">
					<a class="icon_you1" @click="seekclick">
						<img src="../../../assets/images/caipiao/icon_sousuo.png" />
					</a>
					<a class="icon_you2" @click="trendclick">
						<img src="../../../assets/images/caipiao/icon_zoushi.png" alt />
					</a>
				</div>
			</div>
		</div>
		<div class="login_periods">
			<p>
				<span>
          第
          <b class="color_red">{{arriveNper}}</b>期
        </span>
				<span>
          距开奖
          <b class="color_red">{{lotterytime}}</b>
        </span>
			</p>
		</div>
		<div class="login_lottery">
			<p class="login_lottery_p1">
				<span>
          第
          <b class="color_red">{{qishunumber}}</b> 期
        </span>
				<span>开奖时间:{{time}}</span>
			</p>
			<span class="shengxiao_span_radius">{{list}}</span>
			<span class="shengxiao_span_radius">{{list2}}</span>
			<span class="shengxiao_span_radius">{{list3}}</span>
			<span class="shengxiao_span_radius">{{list4}}</span>
			<span class="shengxiao_span_radius">{{list5}}</span>
		</div>
		<!--玩法数据 组件 start-->
		<!--<wanfa :info="opposite"></wanfa>-->
		<div class="contain_main">
			<!--  -->
			<table border="0" cellspacing="0" cellpadding="0" class="table1">
				<thead>
					<tr>
						<th>期号</th>
						<th>万</th>
						<th>千</th>
						<th>百</th>
						<th>十</th>
						<th>个</th>
						<th>龙虎</th>
						<th>前三</th>
						<th>中三</th>
						<th>后三</th>
						<th>总和值</th>
					</tr>
				</thead>
			</table>
			<!--大小-->

		
				<table border="0" cellspacing="0" cellpadding="0" class="contain_main_id" v-if="isred === '大小'">
					<tr v-for="(item,index) in data" :key="index">
						<td>{{item.nper}}</td>
						<td :class="{ 'has-color': defaultPlayIsBig && item.ten_thousands >= 5 || !defaultPlayIsBig && item.ten_thousands < 5 }">{{ item.ten_thousands }}</td>
						<td :class="{ 'has-color': defaultPlayIsBig && item.thousands >= 5 || !defaultPlayIsBig && item.thousands < 5 }">{{ item.thousands }}</td>
						<td :class="{ 'has-color': defaultPlayIsBig && item.hundreds >= 5 || !defaultPlayIsBig && item.hundreds < 5 }">{{ item.hundreds }}</td>
						<td :class="{ 'has-color': defaultPlayIsBig && item.tens >= 5 || !defaultPlayIsBig && item.tens < 5 }">{{ item.tens }}</td>
						<td :class="{ 'has-color': defaultPlayIsBig && item.units >= 5 || !defaultPlayIsBig && item.units < 5 }">{{ item.units }}</td>

						<td :class="{ 'has-color-long': item.tiger ==='龙' ,'has-colorr-hu': item.tiger==='虎','has-colorrr-he': item.tiger==='和'}">{{item.tiger}}</td>
						<td :class="{ 'has-color': item.top ==='顺子' ,'has-colorr-zaliu': item.top==='杂六','has-colorrr': item.top==='半顺' ,'has-colorrrr': item.top==='对子'}">{{item.top}}</td>
						<td :class="{ 'has-color': item.middle ==='顺子' ,'has-colorr-zaliu': item.middle==='杂六','has-colorrr': item.middle==='半顺' }">{{item.middle}}</td>
						<td :class="{ 'has-color': item.latter ==='顺子' ,'has-colorr-zaliu': item.latter==='杂六','has-colorrr': item.latter==='半顺' }">{{item.latter}}</td>
						<td>{{item.sum}}</td>
						<td :class="{ 'has-color-dan':  item.odd  ==='单'  }">{{item.odd}}</td>
						<td :class="{ 'has-color-da':  item.big  ==='大'  }">{{item.big}}</td>
					</tr>
				</table>


			<!--单双-->
			<table border="0" cellspacing="0" cellpadding="0" class="contain_main_id" v-else-if="isred === '单双'">
				<tr v-for="(item,index) in data" :key="index">
					<td>{{item.nper}}</td>
					<td :class="{ 'has-color': defaultPlayIsBig2 && item.ten_thousands%2 !== 0  || !defaultPlayIsBig2 && item.ten_thousands%2 === 0 }">{{ item.ten_thousands }}</td>
					<td :class="{ 'has-color': defaultPlayIsBig2 && item.thousands%2 !== 0 || !defaultPlayIsBig2 && item.thousands%2  === 0 }">{{ item.thousands }}</td>
					<td :class="{ 'has-color': defaultPlayIsBig2 && item.hundreds%2 !== 0 || !defaultPlayIsBig2 && item.hundreds%2  === 0 }">{{ item.hundreds }}</td>
					<td :class="{ 'has-color': defaultPlayIsBig2 && item.tens%2 !== 0 || !defaultPlayIsBig2 && item.tens%2  === 0 }">{{ item.tens }}</td>
					<td :class="{ 'has-color': defaultPlayIsBig2 && item.units%2 !== 0 || !defaultPlayIsBig2 && item.units%2  === 0 }">{{ item.units }}</td>

					<td :class="{ 'has-color-long': item.tiger ==='龙' ,'has-colorr-hu': item.tiger==='虎','has-colorrr-he': item.tiger==='和'}">{{item.tiger}}</td>
					<td :class="{ 'has-color': item.top ==='顺子' ,'has-colorr-zaliu': item.top==='杂六','has-colorrr': item.top==='半顺' ,'has-colorrrr': item.top==='对子'}">{{item.top}}</td>
					<td :class="{ 'has-color': item.middle ==='顺子' ,'has-colorr-zaliu': item.middle==='杂六','has-colorrr': item.middle==='半顺' }">{{item.middle}}</td>
					<td :class="{ 'has-color': item.latter ==='顺子' ,'has-colorr-zaliu': item.latter==='杂六','has-colorrr': item.latter==='半顺' }">{{item.latter}}</td>
					<td>{{item.sum}}</td>
					<td :class="{ 'has-color-dan':  item.odd  ==='单'  }">{{item.odd}}</td>
					<td :class="{ 'has-color-da':  item.big  ==='大'  }">{{item.big}}</td>
				</tr>
			</table>
			<!--全白-->
			<table border="0" cellspacing="0" cellpadding="0" class="contain_main_id" v-else-if="isred === '全白'">
				<tr v-for="(item,index) in data" :key="index">
					<td>{{item.nper}}</td>
					<td :class="{ 'has-color':defaultPlayIsBig3}">{{ item.ten_thousands }}</td>
					<td :class="{ 'has-color':defaultPlayIsBig3}">{{ item.thousands }}</td>
					<td :class="{ 'has-color':defaultPlayIsBig3}">{{ item.hundreds }}</td>
					<td :class="{ 'has-color':defaultPlayIsBig3}">{{ item.tens }}</td>
					<td :class="{ 'has-color':defaultPlayIsBig3}">{{ item.units }}</td>

					<td :class="{ 'has-color-long': item.tiger ==='龙' ,'has-colorr-hu': item.tiger==='虎','has-colorrr-he': item.tiger==='和'}">{{item.tiger}}</td>
					<td :class="{ 'has-color': item.top ==='顺子' ,'has-colorr-zaliu': item.top==='杂六','has-colorrr': item.top==='半顺' ,'has-colorrrr': item.top==='对子'}">{{item.top}}</td>
					<td :class="{ 'has-color': item.middle ==='顺子' ,'has-colorr-zaliu': item.middle==='杂六','has-colorrr': item.middle==='半顺' }">{{item.middle}}</td>
					<td :class="{ 'has-color': item.latter ==='顺子' ,'has-colorr-zaliu': item.latter==='杂六','has-colorrr': item.latter==='半顺' }">{{item.latter}}</td>
					<td>{{item.sum}}</td>
					<td :class="{ 'has-color-dan':  item.odd  ==='单'  }">{{item.odd}}</td>
					<td :class="{ 'has-color-da':  item.big  ==='大'  }">{{item.big}}</td>
				</tr>
			</table>
			<!--自定义-->
			<table border="0" cellspacing="0" cellpadding="0" class="contain_main_id" v-else>
				<tr v-for="(item,index) in data" :key="index">
					<td>{{item.nper}}</td>
					<td :class="{ 'has-color': !defaultPlayIsBig4 && item.ten_thousands > 6 ,'has-colorr': defaultPlayIsBig4 && item.ten_thousands < 3 }">{{ item.ten_thousands }}</td>
					<td :class="{ 'has-color': !defaultPlayIsBig4 && item.thousands > 6 ,'has-colorr':  defaultPlayIsBig4 && item.thousands < 3 }">{{ item.thousands }}</td>
					<td :class="{ 'has-color': !defaultPlayIsBig4 && item.hundreds >6 ,'has-colorr': defaultPlayIsBig4 && item.hundreds < 3}">{{ item.hundreds }}</td>
					<td :class="{ 'has-color': !defaultPlayIsBig4 && item.tens >6,'has-colorr':  defaultPlayIsBig4 && item.tens < 3 }">{{ item.tens }}</td>
					<td :class="{ 'has-color': !defaultPlayIsBig4 && item.units >6 ,'has-colorr':  defaultPlayIsBig4 && item.units < 3 }">{{ item.units }}</td>
					<td :class="{ 'has-color-long': item.tiger ==='龙' ,'has-colorr-hu': item.tiger==='虎','has-colorrr-he': item.tiger==='和'}">{{item.tiger}}</td>
					<td :class="{ 'has-color': item.top ==='顺子' ,'has-colorr-zaliu': item.top==='杂六','has-colorrr': item.top==='半顺' ,'has-colorrrr': item.top==='对子'}">{{item.top}}</td>
					<td :class="{ 'has-color': item.middle ==='顺子' ,'has-colorr-zaliu': item.middle==='杂六','has-colorrr': item.middle==='半顺' }">{{item.middle}}</td>
					<td :class="{ 'has-color': item.latter ==='顺子' ,'has-colorr-zaliu': item.latter==='杂六','has-colorrr': item.latter==='半顺' }">{{item.latter}}</td>
					<td>{{item.sum}}</td>
					<td :class="{ 'has-color-dan':  item.odd  ==='单'  }">{{item.odd}}</td>
					<td :class="{ 'has-color-da':  item.big  ==='大'  }">{{item.big}}</td>
				</tr>
			</table>
		</div>
		<!--玩法数据 组件 end-->
		<!--foot strat-->
		<ul class="login_footer">
			<li v-for="(item,index) in play" :key="index" :class="{red:isred==item}" @click="changeTop(item)">{{item}}</li>
		</ul>
		<!--foot end-->
		<!--右侧搜索 strat-->
		<van-popup v-model="show" position="right" @click-overlay="onClose">
			<div class="sousuo_box">
				<div class="sousuo_box_top">
					<p>按日期查找</p>
					<div class="datariq datariq2">
						<input type="text" class="datariq_input1" v-model="datariq" />
						<span class="datariq_span1">
              <i class="rili" @click="dataclick"></i>
            </span>
					</div>
					<p>按号码查找</p>
					<div class="datariq">
						<input type="text" v-model="datariq2" />
					</div>
					<button class="sousuo_btn" @click="submitclick">提交</button>
					<button class="sousuo_btn2" @click="resetclick">重置</button>
				</div>
				<div class="sousuo_box_bottom" v-show="hideshow">
					<p>温馨提示：</p>
					<div class="bottom_hint">
						<p>1.期号正确的输入方式，比如是一位20170909001，或者九位数170909001，或者只输入当天的期号1、01、001都可以</p>
						<p>2.您还可以选择日期，比如2017-09-09，在输入期号1、01、001，那么就会查到20170909001的数据</p>
					</div>
				</div>
			</div>
		</van-popup>
		<!--右侧搜索 end-->
		<!--调起日历日期 start  -->
		<van-popup v-model="datashow" position="bottom" :overlay="false">
			<van-datetime-picker 
				  v-model="currentDate" 
				  type="date" 
				  @change="change" @confirm="confirm" @cancel="cancel" :min-date="minDate" />
		</van-popup>
		<!--调起日历 end-->
		<!-- 加载刷新中  start-->
		<van-popup v-model="flushshow">
			<van-loading type="spinner" color="#1989fa" />
		</van-popup>
		<!-- 加载刷新中 end -->
		</div>
	</div>
</template>

<script>
	//	import wanfa from "../../../components/common/wanfa/wanfa";
	import moment from "moment";
	export default {
		//		components: {
		//			wanfa
		//		},
		data() {
			return {
				//时间范围 start
         minDate: new Date(2000, 1, 1),//日期vant
         //时间范围 end
         datashow: false, //日期显示隐藏
				 currentDate: new Date(), //年月日 vant
				docmHeight: document.documentElement.clientHeight, //默认屏幕高度
				showHeight: document.documentElement.clientHeight, //实时屏幕高度
				hideshow: true, //日历说明 键盘顶起隐藏
				flushshow: false, //刷新弹窗
				defaultPlayIsBig: true, //大小   true 为大，false 为小
				defaultPlayIsBig2: true, //单双   true 为单，false 为双
				defaultPlayIsBig3: false, //全白 class取消背景色
				defaultPlayIsBig4: true, //自定义   4为true为红
				data: [],
				isred: "大小", //点击添加class变红
				play: ["大小", "单双", "全白", "自定义"], //底部玩法
				datariq2: "", //按号码查询
				datariq: "", //日期
				show: false, //搜索显示隐藏
				list: "", //中奖数万位
				list2: "", //中奖数千位
				list3: "", //中奖数百位
				list4: "", //中奖数十位
				list5: "", //中奖数个位
				time: "", //开奖时间
				qishunumber: "", //开奖期数
				lotterytime: "", //倒计时
				rotate: false //刷新图片旋转
			};
		},

		created() {
			//			最新一期开奖结果
			this.tongji();
			this.jieguo();
		},
		mounted() {
			// 获取高度
			// var vheight=document.body.clientHeight;
			// var height_x = kuang_height - 44;
			//  document.getElementsByClassName("sousuo_box").style.height = height_x + "px";
			//  第二种
			window.onresize = () => {
				return(() => {
					this.showHeight = document.body.clientHeight;
					console.log(this.showHeight + "||默认高度" + this.docmHeight);
				})();
			};
		},
		watch: {
			showHeight: function() {
				if(this.docmHeight > this.showHeight) {
					this.hideshow = false;
				} else {
					this.hideshow = true;
				}
			}
		},

		//距离上一期+1
		computed: {
			arriveNper() {
				let nper = parseInt(this.qishunumber);
				if(!nper) {
					return 0;
				}
				return nper + 1;
			}
		},

		methods: {
			//数据加载 start
		
			//数据加载 end
			//			最新一期开奖结果
			jieguo() {
				this.http.get("/api/new/nper").then(res => {
					console.log(res);
					if(res.status_code == 200) {
						this.list = res.data.ten_thousands;
						this.list2 = res.data.thousands;
						this.list3 = res.data.hundreds;
						this.list4 = res.data.tens;
						this.list5 = res.data.units;
						this.time = res.data.created_at;
						this.qishunumber = res.data.nper;
						this.shijiantime(); //调用倒计时
					} else {
						this.$toasted.error(res.message).goAway(1000);
					}
				});
			},

			//   渲染之前请求  开奖号码统计
			tongji() {
				this.http.get("/api/statistical/data").then(res => {
					console.log(res);
					if(res.status_code == 200) {
						this.data = res.data;
					} else {
						this.$toasted.error(res.message).goAway(1000);
					}
				});
				//默认日期 获取现在时间然后转换
				var newdata = new Date();
				this.datariq = moment(newdata).format("YYYYMMDD ");
			},

			//点大小单双..
			changeTop(item) {
				this.isred = item;
				switch(item) {
					case "大小":
						this.defaultPlayIsBig = !this.defaultPlayIsBig;
						break;
					case "单双":
						this.defaultPlayIsBig2 = !this.defaultPlayIsBig2;
						break;
					case "全白":
						this.defaultPlayIsBig3 = false;
						break;
					case "自定义":
						this.defaultPlayIsBig4 = !this.defaultPlayIsBig4;
						break;
				}
			},
			//点击搜索弹窗
			seekclick() {
				this.show = !this.show;
			},
			//点击走势图弹窗
			trendclick() {
				this.$router.push("/register");
			},
			//点击提交,把dates，issue传过去
			submitclick() {
				console.log(this.datariq);
				this.http
					.get("/api/search/data", {
						params: {
							dates: this.datariq,
							issue: this.datariq2
						}
					})
					.then(res => {
						console.log(res);
						if(res.status_code == 200) {
							this.data = res.data;//更换日期数据
							this.datariq2 = "";//清空号码
							this.datashow = false; //关闭日历
							this.show = !this.show;//关闭搜索弹窗
						} else {
							this.$toasted.error(res.message).goAway(1000);
						}
					});
			},
			//点击重置
			resetclick() {
				this.datariq2 = ""; //号码查询清空
				//重置日期返回到今天日期
				var newdata = new Date(); //现在时间
				this.datariq = moment(newdata).format("YYYYMMDD ");
			},
			//点击日历
			dataclick() {
				this.datashow = true;
			},
			//日历点击完成按钮时触发的事件
			confirm(val) {
				console.log("aa"+val); // 打印出了时间
				this.datariq = moment(val).format("YYYYMMDD ");
				this.datashow = false;
			},
			//日历当值变化时触发的事件
			change(e) {
				console.log(e.getValues()); // 打印出了选中的时间，是个数组
				let time = e.getValues();
				this.datariq = `${time[0]}${time[1]}${time[2]}`;
				console.log(this.datariq);
			},
			//日历取消
			cancel() {
				this.datashow = false;
			},
			//左侧的刷新  走开奖号码统计，最新一期开奖结果接口
			flushclick() {
				console.log("刷新了");
				// 请求数据
				this.jieguo();
				this.tongji();
				//				this.$toast("已刷新");
				//				this.rotate = !this.rotate;
				//				console.log(this.rotate)
				// this.flushshow=!this.flushshow
			},
			// 点击蒙版关掉日历
			onClose(e) {
				this.datashow = false;
			},
			//倒计时
			shijiantime() {
				var newdata = new Date(); //现在时间
				var time1 = newdata.getTime(); //转化时间戳
				console.log(time1);

				var time2 = new Date(this.time.replace(/\-/g, "/")).getTime(); //上 期 开奖转化时间戳


				console.log(time2);

				//测试
				// var time2 = new Date('2019-09-19 20:17:00').getTime() //上 期开奖转化时间戳
				// console.log(time2);

				this.countDownList = 600000 - (newdata - time2); //剩余时间 现在时间-上期开奖时间
				console.log(this.countDownList);
				var seconds = parseInt(this.countDownList); //获取秒取整数
				//倒计时
				var timer = setInterval(() => {
					seconds = seconds - 1000;
					if(seconds <= 0) {
						// 倒计时结束请求数据
						this.jieguo();
						this.tongji();

						//					console.log("此时倒计时小于0");
						// 清楚定时器
						clearInterval(timer);
					}
					var m = parseInt((seconds % (1000 * 60 * 60)) / (1000 * 60));
					var s = Math.floor((seconds % (1000 * 60)) / 1000);
					if(s <= 0) {
						s = 0;
					}
					if(m < 10) {
						m = "0" + m;
					}
					if(s < 10) {
						s = "0" + s;
					}

					//					console.log('设置显示时间')
					let timeRamin = m + ":" + s; // timeRamin 是显示在页面上的时分
					

					this.lotterytime = timeRamin; //

				}, 1000);
			}
		}
	};
</script>

<style scoped>
	.login_footer {
		box-shadow: 0rem 0.01rem 0.05rem 0rem rgba(0, 0, 0, 0.5);
	}
	
	.login_footer li {
		font-size: 0.24rem;
		color: #999999;
	}
	
	.login_footer .red {
		color: #d31d17;
		font-size: 0.24rem;
	}
	
	.has-color {
		background-color: #f5afa7;
		color: #fff;
	}
	
	.has-colorr {
		background-color: rgb(128, 128, 192);
		color: #fff;
	}
	
	.has-colorrr {
		color: blueviolet;
	}
	
	.has-colorrrr {
		color: #1aad19;
	}
	
	.has-color-da {
		background-color: #e5898b;
		color: #fff;
	}
	
	.has-color-dan {
		background-color: #7b9fe5;
		color: #fff;
	}
	
	.has-color-long {
		background-color: #fee9d4;
	}
	
	.has-colorr-hu {
		background-color: #eefeed;
	}
	
	.has-colorr-zaliu {
		color: #138fe6;
	}
	
	.has-colorrr-he {
		color: #000;
	}
	
	.login_lottery .shengxiao_span_radius {
		margin-right: 0.12rem;
	}
	
	.aa {
		transition: all 2s;
	}
	
	.go {
		transform: rotate(360deg);
		transition: all 2s;
	}
	/* 解决苹果x */
	 .home_box{
 	padding-bottom: constant(safe-area-inset-bottom); 
  padding-bottom: env(safe-area-inset-bottom);
  }
</style>